<template>
  <div class="app-container">
    <!-- <div class="d-flex justify-space-between align-center">
      <span>{{ pageType === 'add' ? '新增员工' : '编辑员工' }}</span>
      <el-button type="primary" plain @click="$router.go(-1)">
        返回
      </el-button>
    </div> -->
    <div class="d-flex">
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="form.name" clearable placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="电话：" prop="phone">
          <el-input v-model="form.phone" clearable placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="form.status" style="width: 320px" clearable placeholder="请选择状态">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="每日配量：" prop="count">
          <el-input v-model="form.count" clearable placeholder="请输入每日配量" />
        </el-form-item>
        <el-form-item label="登录：" prop="login">
          <el-select v-model="form.login" style="width: 320px" clearable placeholder="请选择状态">
            <el-option v-for="item in loginList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="分配新客户：" prop="receive">
          <el-select v-model="form.receive" style="width: 320px" clearable placeholder="请选择">
            <el-option v-for="item in receiveList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="门店：">
          <el-select v-model="form.shopId" style="width: 320px" clearable placeholder="请选择门店" @change="getAllTeamList">
            <el-option v-for="item in shopList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="团队：">
          <el-select v-model="form.teamId" style="width: 320px" clearable placeholder="请选择团队">
            <el-option v-for="item in teamList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位：" prop="roleId">
          <el-select v-model="form.roleId" style="width: 320px" clearable placeholder="请选择岗位">
            <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道：" v-if="roleType === 4">
          <el-select v-model="form.channelId" style="width: 320px" clearable placeholder="请选择岗位">
            <el-option v-for="item in channelList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { addEmployee, updateEmployee } from "@/api/employee";
import { getAllShopList } from "@/api/shop";
import { getAllTeamList } from "@/api/team";
import { getRoleList } from "@/api/role";
import { getAllChannelList } from "@/api/channel/index";
import { statusList, loginList, receiveList } from "./const";
import { PHONE_REG } from "@/const";
export default {
  name: "CreateStaff",
  props: {
    data: {
      type: Object,
      default: function () {
        return {};
      },
    },
    status: {
      type: String,
    },
  },
  data() {
    const validatephone = (rule, value, callback) => {
      if (!PHONE_REG.test(value)) {
        callback(new Error("请输入正确的手机"));
      } else {
        callback();
      }
    };
    return {
      form: {
        id: "",
        name: "",
        phone: "",
        status: "",
        count: "",
        login: "",
        receive: "",
        roleId: "",
        shopId: "",
        teamId: "",
        channelId: "",
      },
      statusList,
      loginList,
      receiveList,
      shopList: [],
      teamList: [],
      roleList: [],
      channelList: [],
      rules: {
        name: [
          { required: true, message: "请输入员工名称", trigger: "change" },
        ],
        phone: [
          { required: true, validator: validatephone, trigger: "change" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        count: [
          { required: true, message: "请输入每日配量", trigger: "change" },
        ],
        login: [{ required: true, message: "请选择登录状态", trigger: "blur" }],
        receive: [
          { required: true, message: "请选择客户分配", trigger: "blur" },
        ],
        //shopId: [{ required: true, message: "请选择门店", trigger: "blur" }],
        // teamId: [{ required: true, message: '请选择团队', trigger: 'blur' }],
        roleId: [{ required: true, message: "请选择岗位", trigger: "blur" }],
      },
      pageType: "add",
    };
  },
  watch: {
    data: {
      handler: function (n, o) {
        const row = n;
        if (Object.keys(n).length == 0) {
          return false;
        }
        if (row.shopId) {
          this.getAllTeamList(row.shopId);
        }
        Object.keys(this.form).forEach((key) => {
          if (key == "teamId" && row[key]) {
            this.form[key] = Number(row[key]);
          }
          if (row[key]) {
            this.form[key] = row[key];
          }
        });
        console.log(row);
      },
      immediate: true,
    },
    status: {
      handler: function (n, o) {
        this.pageType = n;
      },
      immediate: true,
    },
  },
  computed: {
    // pageType() {
    //   return this.$route.params.type;
    // },
    roleType() {
      // console.log(
      //   this.roleList.find(({ value }) => value === this.form.roleId)
      // );
      return this.roleList.find(({ value }) => value === this.form.roleId)
        ?.type;
    },
  },
  created() {
    this.getAllShopList();
    //this.getAllTeamList()
    this.getRoleList();
    this.getAllChannelList();
    // if (this.pageType !== "add") {
    //   const row = JSON.parse(this.$route.params.row);
    //   if (row.shopId) {
    //     this.getAllTeamList(row.shopId);
    //   }
    //   Object.keys(this.form).forEach((key) => {
    //     console.log(key);
    //     if (key == "teamId") {
    //       this.form[key] = Number(row[key]);
    //     } else {
    //       this.form[key] = row[key];
    //     }
    //   });
    // }
  },
  methods: {
    async getAllShopList() {
      const res = await getAllShopList();
      if (!res.result) return;
      this.shopList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },
    async getAllTeamList(id) {
      if (this.form.teamId) {
        delete this.form.teamId;
      }
      const res = await getAllTeamList({ shopId: id });
      if (!res.result) return;
      this.teamList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },
    async getAllChannelList() {
      const res = await getAllChannelList();
      if (!res.result) return;
      this.channelList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.nickname,
        };
      });
    },
    async getRoleList() {
      const res = await getRoleList();
      if (!res.result) return;
      this.roleList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
          type: item.type,
        };
      });
    },
    async onSave() {
      try {
        await this.$refs["form"].validate();
        this.pageType === "add" ? this.addEmployee() : this.updateEmployee();
      } catch (error) {}
    },
    async addEmployee() {
      const { code } = await addEmployee(this.form);
      if (code === 200) {
        this.$message.success("新增员工成功");
        //this.$router.go(-1);
        this.$emit("confirm", true);
      }
    },
    async updateEmployee() {
      const { code } = await updateEmployee(this.form);
      if (code === 200) {
        this.$message.success("编辑员工成功");
        //this.$router.go(-1);
        this.$emit("confirm", true);
      }
    },
  },
};
</script>
